<template>
	<Layout class="layout-container" style="background: transparent;">
		<Content style="background: transparent;">
			<div class="folder-border">
				<ul class="folder-menu-icons">
					<template v-for="(menu, index) in params">
					<li @click="onMenuClick(menu, index)">
						<i :style="{'background-image': 'url(' + menu.icon + ')'}"></i>
						<div>{{getI18nName(menu)}}</div>
					</li>
					</template>
				</ul>
			</div>
		</Content>
	</Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Alert } from 'view-design';
export default {
	name: "SysMore",
	props: {
		params: {
			type: Array,
			default: []
		}
	},
	methods: {
		onMenuClick(menu, index) {
			this.$emit("callback", menu, index);
			this.$emit("close");
		},
		getI18nName(menu) {
			return menu.i18n ? this.$t(menu.i18n) : menu.name;
		}
	},
	components: {
		Layout,
		Content,
		Alert
	}
}
</script>
<style type="text/css" scoped>
/***************文件夹中图标**************/
div.folder-border {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: transparent;
}

ul.folder-menu-icons {
    position: relative;
    display: block;
    width: 100%;
    padding:0 0;
    margin:0 0;
}

ul.folder-menu-icons li {
    position: relative;
    display: inline-block;
    margin:0 0;
    padding:10px 10px;
    width: 107px;
    float:left;
    margin-left:-1px;
    margin-top:-1px;
    cursor: pointer;
}

ul.folder-menu-icons li i {
    position: relative;
    display: block;
    margin-left: 13px;
    background-size:100% 100%;
    width: 60px;
    height: 60px;
}

ul.folder-menu-icons li div {
    color: #c2c2c2;
    text-align: center;
    font-size: 14px;
    line-height: 25px;
}
</style>